<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-05-11 08:50:21
 * @LastEditTime : 2023-08-23 15:28:27
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/userInfo/company/index.vue
 * @Description  : -公司店铺运营首页
-->
<template>
  <div class="dashboard-editor-container">

    <company-group :dailData="dailData"/>

    <div class="chart-wrapper">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="40px">
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="queryParams.storeId" placeholder="请选择" @change="storeChange" clearable>
            <el-option v-for="dict in storeList" :key="dict.value" :label="dict.lable" :value="dict.value"/>
          </el-select>
        </el-form-item>
      </el-form>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <p>近七天订单量</p>
            <order-chart ref="orderChart" :chartData="orderChart"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <p>近七天订单金额量</p>
            <amount-chart ref="amountChart" :chartData="amountChart"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <p>近一个月销售类目</p>
            <category-chart ref="categoryChart" :chartData="categoryData"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <p>近一个月销售国家</p>
            <country-chart ref="countryChart" :chartData="countryData"/>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <div class="chart-wrapper margin0">
            <p>近一个月商品销售排行（销售金额累计TOP10）</p>
            <div class="chart-wrapper-box">
              <el-table
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                :data="rankingData"
                border
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column prop="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="orderNumber" label="订单数"/>
                <el-table-column prop="saleNumber" label="销售金额"/>
                <el-table-column prop="profitAmount" label="利润"/>
                <el-table-column prop="profitRate" label="利润率"/>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <notice/>
  </div>
</template>

<script>
import CompanyGroup from '../../dashboard/CompanyGroup'
import OrderChart from '../../dashboard/OrderChart'
import RaddarChart from '../../dashboard/RaddarChart'
import AmountChart from '../../dashboard/AmountChart'
import CategoryChart from '../../dashboard/CategoryChart'
import CountryChart from '../../dashboard/CountryChart'
import Notice from '../../dashboard/Notice'
import {
  reView,
  CompanyDailData,
  selectShopList,
  CompanyLastWeekData,
  CompanyLastWeekPayAmountData,
  CompanyLastMonthCategoryData,
  CompanyLastMonthCountryData,
  CompanySaleRankingMonthData, ckeckEmpowerStatus
} from "@/api/index/index"

export default {
  name: 'companyPage',
  components: {
    CompanyGroup,
    OrderChart,
    RaddarChart,
    AmountChart,
    CategoryChart,
    CountryChart,
    Notice
  },
  data() {
    return {
      rankingData: [], // 近一个月商品销售排行（销售金额累计TOP10）
      dailData: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: undefined
      },
      storeList: [], // 店铺列表
      orderChart: {}, // 近七日订单量
      amountChart: {}, // 近七天支付金额量
      categoryData: [], // 近一个月销售类目占比
      countryData: [], // 近一个月销售国家占比
      loading: true
    }
  },
  created() {
    this.getReView();
    this.getCompanyDailData();
    this.getselectShopList();
    this.ckeckEmpowerStatus()
  },
  methods: {
    // 查看是否有授权过期的店铺
    ckeckEmpowerStatus() {
      ckeckEmpowerStatus().then(res => {
        if (res.msg) {
          this.$confirm(res.msg, '提示', {
            confirmButtonText: '查看',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push(`/empower/operateShopList`);
          })
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 选择店铺
    storeChange(e) {
      this.init();
    },
    // 实时数据
    getCompanyDailData() {
      CompanyDailData().then(res => {
        this.dailData = res.data;
      })
    },
    // 获取店铺
    getselectShopList() {
      selectShopList().then(res => {
        this.storeList = res.data;
        this.init();
      })
    },
    init() {
      this.getCompanyLastWeekData();
      this.getCompanyLastWeekPayAmountData();
      this.getCompanyLastMonthCategoryData();
      this.getCompanyLastMonthCountryData();
      this.getCompanySaleRankingMonthData();
    },
    // 近七日订单量
    getCompanyLastWeekData() {
      CompanyLastWeekData(this.queryParams).then(res => {
        this.orderChart = res.data;
        this.$nextTick(() => {
          this.$refs.orderChart.initChart();
        })
      })
    },
    // 近七天支付金额量
    getCompanyLastWeekPayAmountData() {
      CompanyLastWeekPayAmountData(this.queryParams).then(res => {
        this.amountChart = res.data;
        this.$nextTick(() => {
          this.$refs.amountChart.initChart();
        })
      })
    },
    // 近一个月销售类目占比
    getCompanyLastMonthCategoryData() {
      CompanyLastMonthCategoryData(this.queryParams).then(res => {
        this.categoryData = res.data.series;
        this.$nextTick(() => {
          this.$refs.categoryChart.initChart();
        })
      })
    },
    // 近一个月销售国家占比
    getCompanyLastMonthCountryData() {
      CompanyLastMonthCountryData(this.queryParams).then(res => {
        this.countryData = res.data.series;
        this.$nextTick(() => {
          this.$refs.countryChart.initChart();
        })
      })
    },
    // 近一个月商品销售排行（销售金额累计TOP10）
    getCompanySaleRankingMonthData() {
      this.loading = true
      CompanySaleRankingMonthData(this.queryParams).then(res => {
        this.rankingData = res.records;
        this.loading = false;
      })
    },
    // 查看是否有未处理的订单
    getReView() {
      reView().then(res => {
        if (res.str == '1') {
          this.noticeFn();
        }
      })
    },
    noticeFn() {
      this.$confirm('您有新的订单待处理', '提示', {
        confirmButtonText: '查看',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push(`/order/order`);
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 20px 16px 0;
    margin-bottom: 32px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    .chart-wrapper-box {
      padding-bottom: 20px;
    }

    p {
      font-size: 16px;
      line-height: 18px;
      margin: 0 0 15px;
      color: #666;
    }
  }

  .margin0 {
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
